import React from 'react'
import Taro, { FC } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { OrderDetail } from '@/constants/commonType'
import api from '@/services/config/index'
import './index.scss'

interface PageProps {
  orderDetail: OrderDetail
  closePay: (Update: boolean) => void
}
const Payment: FC<PageProps> = ({ orderDetail, closePay }) => {
  // 订单支付
  function paymentAction() {
    api['orderList/paymentAction']({ orderId: orderDetail.orderId }).then(() => {
      Taro.showToast({ title: '支付成功', icon: 'success', duration: 2000 })
      closePay(true)
    })
  }
  return (
    <View className='payment curtain'>
      <View className='payment-surePay white-bgc'>
        <View className='payment-surePay__title b-bottom'>
          <AtIcon
            value='close'
            size='20'
            color='#bbbbbb'
            className='payment-surePay__icon ct'
            onClick={() => {
              if (orderDetail.buttonList.orderCreateButton === '1') {
                closePay(true)
              } else {
                closePay(false)
              }
            }}
          ></AtIcon>
          确认付积分
        </View>
        <View className='payment-surePay__points'>{orderDetail.order.orderTotalPoints}积分</View>
        <View className='payment-surePay__orderInfo b-bottom sb-flex grey-color'>
          <View>订单金额</View>
          <View>{orderDetail.order.orderTotalPoints}积分</View>
        </View>
        <View className='payment-surePay__orderInfo b-bottom sb-flex grey-color'>
          <View>订单编号</View>
          <View>{orderDetail.orderNumber}</View>
        </View>
        <View className='payment-surePay__orderInfo b-bottom sb-flex grey-color'>
          <View>付积分方式</View>
          <View>积分支付</View>
        </View>
        <Button className='payment-surePay__sureBtn red-bgc  white-color' onClick={paymentAction}>
          确认付积分
        </Button>
        <Button
          className='payment-surePay__noSureBtn white-bgc'
          onClick={() => {
            if (orderDetail.buttonList.orderCreateButton === '1') {
              closePay(true)
            } else {
              closePay(false)
            }
          }}
        >
          稍后再付
        </Button>
      </View>
    </View>
  )
}

export default Payment
